<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { CreateElement } from 'vue'

@Component({
  name: 'RenderLink'
})
export default class extends Vue {
  // button text
  @Prop({ type: String, required: false, default: '' })
  private placeholder!: string

  private calcLink (url: string) {
    if (/^(https?:)?\/\/\w+/.test(url)) {
      return url
    } else {
      return '//' + url
    }
  }

  render (h: CreateElement) {
    return h('el-table-column', {
      props: this.$attrs,
      scopedSlots: {
        default: ({ row }) => {
          let url = row[this.$attrs.prop]

          return url
            ? h(
              'a',
              {
                class: 'table-column-link',
                attrs: { href: this.calcLink(url), target: '_blank' }
              },
              this.placeholder || url
            )
            : null
        }
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.table-column-link {
  color: $primary;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
